<template>
  <div>
    <el-card>
      <div>
        <el-form>
          <el-row >
            <el-col :span="4" style="margin-right: 10px;">
              <el-form-item>
                <el-input  v-model="keyword" placeholder="请输入订单号"/>
              </el-form-item>
            </el-col>
            <el-col :span="3" style="margin-right: 10px;">
              <el-select v-model="merchant_id" placeholder="选择门店">
                <el-option v-for="item in merchantsList" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </el-col>
            <el-col :span="5" style="margin-right: 10px;">
              <el-form-item>
              <el-date-picker style="width: 100%;" v-model="timeList" value-format="yyyy-MM-dd" type="daterange" align="right" :unlink-panels="true" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
              </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 提交按钮 -->
           <el-col :span="6" >
              <el-form-item style="text-align: left;width: 300px;">
                <el-button type="primary" size="large" @click="handleSubmit">搜索</el-button>
                <el-button size="large" style="margin-left: 8px" @click="handleReset">重置</el-button>
                <a style="margin-left: 12px" :href="`${this.$api.baseUrl}merchant/data/enterpriseMoneyExport?merchant_token=${merchant_token}&merchant_id=${merchant_id}&keyword=${keyword}&start_time=${timeList?timeList[0]+' 00:00:00':''}&end_time=${timeList?timeList[1]+' 23:59:59':''}`"><el-button type="primary" size="large">导出流水数据</el-button></a>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- <h1 slot="header" style="text-align: center;">资金流水账</h1> -->
      <el-table stripe :data="formdata" v-loading="loading" border :header-cell-style="{background:'#f9d1d1cf',color:'#606266'}"
        style="width: 100%;">
        <el-table-column align="center" prop="id" label="序号" />
        <!-- <el-table-column align="center" prop="type_name" label="交易号" /> -->
        <el-table-column align="center" prop="order_num" label="订单号" />
        <el-table-column align="center" prop="merchant_name" label="门店" />
        <el-table-column align="center" prop="original_price" label="原价" />
        <el-table-column align="center" prop="coupon_reduce_price" label="优惠金额" />
        <el-table-column align="center" prop="discount_price" label="折扣价格" />
        <el-table-column align="center" prop="money_type" label="类型" />
        <el-table-column align="center" prop="pay_amount" label="付款金额" />
        <el-table-column align="center" prop="pay_way" label="支付方式" />
        <el-table-column align="center" prop="remark" label="备注" />
        <el-table-column align="center" prop="pay_time" label="交易时间" />
      </el-table>
      <div style="text-align: center;margin-top: 20px;">
        <el-pagination background :current-page="startpage" layout="prev, pager, next" @current-change="pageChange" :page-size="pageSize" :total="totalusers" />
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        merchant_id:"",
        keyword:"",
        start_time:"",
        end_time:"",
        timeList:['',''],
        merchantsList: [],
        loading: false,
        totalusers: 0, //总行数
        pageSize: 10, //每页几行
        startpage: 1, //起始页
        // 这个列表组件，自己找啦）<el-table :data="formdata"></el-table>
        formdata: [], //table表格数据（获取到数据赋值给它就能显示数据列表）
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        merchant_token: '',
      }
  },
  mounted() {
      this.merchant_token = window.localStorage.getItem("user_token")
      this.getEnterpriseMoneyChange()
      this.getMerchantScreenList()
    },
    methods: {

      //搜索
      handleSubmit(){
        this.startpage = 1
        if(this.timeList !=null && this.timeList.length==2){
          this.start_time = this.timeList[0] + " 00:00:00"
          this.end_time = this.timeList[1] + " 23:59:59"
        }
         this.getEnterpriseMoneyChange()
      },
      //重置
      handleReset(){
          this.merchant_id="",
          this.keyword="",
          this.start_time="",
          this.end_time="",
          this.timeList=['','']
          this.startpage = 1
        this.getEnterpriseMoneyChange()
      },
      //分页 pageChange当前页发生改变触发函数
      async pageChange(page) {
        console.log("page====>>" + page)
        this.startpage = page
        this.loading = true
        //调用获取列表的方法
        this.getEnterpriseMoneyChange()
      },
      //获取分页列表
      getEnterpriseMoneyChange() {
        let params = {
          "page": this.startpage,
          "limit": this.pageSize,
          "merchant_id":this.merchant_id,
          "keyword":this.keyword,
          "start_time":this.start_time,
          "end_time":this.end_time
        }
        //调用后台提供的接口方法（这里就不详说封装接口了）
        this.$api.getEnterpriseMoneyChange(params).then(res => {
          console.log(res)
          if (res.data.level == "success") {
            //赋值到formdata 数组
            this.formdata = res.data.data
            this.totalusers = res.data.page_info.total
            this.loading = false
          }else{
            this.$message.error(res.data.message)
          }

        })
      },
      //获取门店列表
      getMerchantScreenList() {
        this.merchantsList = []
        let params = {
          "page": 1,
          "limit": 100000
        }
        this.$api.getMerchantScreenList(params).then(res => {
          if(res.data.level=="success"){
            res.data.data.forEach(item => {
              let option = {
                "id": item.id,
                "label": item.name
              }
              this.merchantsList.push(option)
            })
          }else{
            this.$message.error(res.data.message)
          }

        })
      },

      //财务导出
      async enterpriseMoneyExport(){
        let res = await this.$api.enterpriseMoneyExport({
          "merchant_token": window.localStorage.getItem("user_token"),
          "merchant_id":this.merchant_id,
          "keyword":this.keyword,
          "start_time":this.start_time,
          "end_time":this.end_time
        })
      },

    }
  }
</script>

<style scoped="scoped">
  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #f9d1d1cf;
  }

  /deep/ .el-card__header {
    padding: 0;
  }

</style>
